<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>七彩圆环loading</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    /* 定义全局变量 */
    :root {
      --border: 5px;
      /* 根据总宽度与高度，调整合适的gap间距值 */
      --gap: 15px;
      --w: 200px;
    }
    section {
      width: var(--w);
      height: var(--w);
      position: relative;
    }
    .loader-item {
      /* 计算每个圆环的宽度 */
      --width: calc(var(--w) - var(--gap) * 2 * var(--i));
      width: var(--width);
      /* 圆环的高度为宽度的一半 */
      height: calc(var(--width) / 2);
      border: var(--border) solid var(--c);
      /* 半圆弧 */
      border-radius: 50% 50% 0 0/100% 100% 0 0;
      /* 去掉底部边框 */
      border-bottom: none;
      /* 绝对定位 */
      position: absolute;
      /* 水平居中 */
      left: calc(50% - var(--width) / 2);
      /* 距离顶部的距离，根据gap来定 */
      top: calc(var(--gap) * var(--i));
      /* 添加动画  2s 无限 设置cubic-bezier贝塞尔曲线*/
      animation: rotate 2s cubic-bezier(0.11, 0.85, 0.22, 1.3) infinite;
      /* 设置transform-origin */
      transform-origin: 50% 100%;
      /* 设置动画延迟 */
      animation-delay: calc(-60ms * var(--i));
      /* 添加0.5s过渡效果 */
      transition: all 0.5s;
    }
    /* 动画 */
    @keyframes rotate {
      0%,
      25% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(1turn);
        /* 1turn即为360deg */
      }
    }
    /* section添加 hover事件*/
    section:hover .loader-item {
      filter: brightness(1.5);
      animation-play-state: paused;
    }
  </style>
  <body>
    <section>
      <div class="loader-item" style="--c: #e94545; --i: 0"></div>
      <div class="loader-item" style="--c: #eb8f34; --i: 1"></div>
      <div class="loader-item" style="--c: #eecf69; --i: 2"></div>
      <div class="loader-item" style="--c: #215221; --i: 3"></div>
      <div class="loader-item" style="--c: #87bb80; --i: 4"></div>
      <div class="loader-item" style="--c: #87ceeb; --i: 5"></div>
      <div class="loader-item" style="--c: #c393eb; --i: 6"></div>
    </section>
  </body>
</html>
